<template>
  <panel>

    <div class="search-box">
      <el-row class="form-horizontal">
        <el-col :span="12">
          <el-button type="info" size="small" @click="get">测试</el-button>
          <el-button type="danger" size="small" @click="handlePrint">打印</el-button>
        </el-col>
      </el-row>
    </div>

    <el-row>
      <el-col :span="16">
        <div border="1px solid green" class="print" id="pdf-wrap">
          <!--列表 复制-->
          <h2>毛坯房客户验房指引表</h2>
          <table border="1px solid green">
            <tr>
              <td width="150px">买受人姓名</td>
              <td></td>
              <td width="150px">联系电话</td>
              <td></td>
            </tr>
            <tr>
              <td>房号</td>
              <td colspan="3"></td>
            </tr>
            <tr>
              <td>验收日期</td>
              <td colspan="3"></td>
            </tr>
            <tr>
              <td width="50px">序号</td>
              <td width="120px">检查项</td>
              <td width="90px">验收结果</td>
              <td>问题描述记录</td>
            </tr>
            <tr v-for="(value,index) in myData" style="background-color: #bfcbd9">
              <td>{{index + 1}}</td>
              <td @mouseover="mover" @mouseout="mout">
                {{value}}
                <span style="margin-left: 10px;color: red;cursor:pointer" @click="deltd(nowIndex=index)"
                      v-show="showdel">-</span>
              </td>
              <td>
                <input type="radio" name="checkOk">完好
                <input type="radio" name="checkOk">有问题
              </td>
              <td></td>
            </tr>
            <tr v-show="myData.length==0" style="background-color: #bfcbd9">
              <td colspan="4">暂无数据....</td>
            </tr>
            <tr>
              <td>三表表号：</td>
              <td>水：</td>
              <td>电：</td>
              <td>煤气：</td>
            </tr>
            <tr>
              <td>三表读数：</td>
              <td>水：</td>
              <td>电：</td>
              <td>煤气：</td>
            </tr>
            <tr>
              <td>其它问题记录</td>
              <td colspan="3"></td>
            </tr>
            <tr>
              <td width="150px">验房员签字</td>
              <td></td>
              <td width="150px">买受人签字</td>
              <td></td>
            </tr>
            <tr>
              <td colspan="4">
                <textarea placeholder="如有备注，请点击该区域添加" rows="12" cols="90"/>
              </td>
            </tr>
          </table>
          <p>*如果客户对整个入住过程有意见或建议，请在“其他问题记录”中填写</p>

          <p>*验房员需核实验收结果及问题描述记录是否正确</p>
        </div>
        <!--列表 复制-->
      </el-col>
      <el-col :span="4">
        <el-input
          size="small"
          placeholder="请输入内容"
          icon="search"
          v-model="input"
          :on-icon-click="handleSearch">
        </el-input>
        <template>
          <el-table
            @row-click="chooseRow"
            :data="newtable"
            style="width: 100%">
            <el-table-column
              prop="name">
              <template scope="scope">

                <span style="cursor:pointer;">{{ scope.row.name }}</span>

              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-col>
      <el-col :span="4">
        <el-card class="box-card">
          <div v-for="o in otherData" :key="o" class="text item">
            <span>{{ o }}</span>
            <span style="cursor:pointer;color:blue;margin-left: 15px" @click="addData(o)">添加+</span>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </panel>
</template>

<script>
  import {testGet} from '@/api/test'

  export default {
    data() {
      return {
        myData: [],
        mainData: [],
        otherData: [],
        showdel: false,
        quickData: "",
        nowIndex: -100,
        input: "",
        tableData: [{
          name: '王一虎',
        }, {
          name: '王二虎',
        }, {
          name: '王三虎',
        }, {
          name: '王四虎',
        }]
      }
    },
    computed: {
      newtable() {
        const _this = this;
        let search = _this.input;
        if (search) {
          return _this.tableData.filter(function (user) {
            return Object.keys(user).some(function (key) {
              return String(user[key]).toLowerCase().indexOf(search) > -1
            })
          })
        }

        return _this.tableData;
      }
    },
    methods: {
      get(){
        testGet().then(res => {
          console.log(res);
        })
      },
      handleSearch(){
      },
      handlePrint(){
        let newWindow = window.open("_blank");   //打开新窗口
        let codestr = document.getElementById("pdf-wrap").innerHTML;   //获取需要生成pdf页面的div代码
        newWindow.document.write(codestr);   //向文档写入HTML表达式或者JavaScript代码
        newWindow.document.close();     //关闭document的输出流, 显示选定的数据
        newWindow.print();   //打印当前窗口
        return true;
      },
      mover(){
        const _this = this;
        _this.showdel = true;
      },
      mout(){
        const _this = this;
        _this.showdel = false;
      },
      deltd(n){
        const _this = this;
        _this.$message({
          message: "你确定删除吗？" + n,
          type: 'warning'
        });
        _this.myData.splice(n, 1);
      },
      chooseRow(val){
        const _this = this;
        _this.quickData = val.name;
        _this.otherData = [];
        if (val.name == "王一虎") {
          _this.otherData.push("功能缺陷", "使用不便", "客户建议(可优化)");
        } else if (val.name == "王二虎") {
          _this.otherData.push("度假", "写字楼", "商业", "养老", "教育", "其它");
        } else if (val.name == "王三虎") {
          _this.otherData.push("壁纸开裂", "石材", "天花", "窗", "门", "橱柜", "烟道");
        } else {
          _this.otherData.push("五金", "石材", "天花", "电器设施", "淋浴屏", "门", "窗", "洁具", "洁柜");
        }
      },
      addData(val){
        const _this = this;
        var chooseVal = _this.quickData + " - " + val;
        var flag = true;
        console.log(_this.myData);
        if (_this.myData.length == 0) {
          _this.myData.push(chooseVal);
        } else {
          for (var i = 0; i < _this.myData.length; i++) {
            if (chooseVal == _this.myData[i]) {
              _this.$message({
                message: '不能重复添加！',
                type: 'warning'
              });
              flag = false;
            }
          }
          if (flag) {
            _this.myData.push(chooseVal);
          }
        }
      }
    }
  }
</script>

<style scoped="scoped">
  .text {
    font-size: 10px;
  }

  .item {
    padding: 12px 0;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 150px;
  }
</style>
